<template>
  <view class="main">

    <view class="title">{{titleData.pageTitle}}</view>
    <view class="select" @click="data.clickTitle()">
      {{ data.causeSelect }}
      <uni-icons type="bottom" size="17" :maxlength="200" style="margin-left: auto;"/>
    </view>

    <view class="txt">
      <uni-easyinput type="textarea" autoHeight v-model="data.causeStr" placeholder="请录入退款的原因（200字以内）"></uni-easyinput>
    </view>

    <view class="bottom_div">
      <view>
        <button class="submitOrder" @click="cancelOrder">
          {{ isRefund?'确定退款':'确定取消' }}
        </button>
      </view>
    </view>

    <uni-popup ref="popup" background-color="#fff" type="bottom">
      <view class="region-box">
        <view class="title">
          <view style="width: 140rpx;" @click="() => popup.close()">取消</view>
          <view style="width: 140rpx;" @click="data.popupSubmit">确定</view>
        </view>
        <picker-view class="picker-view" immediate-change :value="data.causeSelect" style="height: 500rpx;"
                     @change="data.changePicker">
          <picker-view-column id="province">
            <view class="item" v-for="(item,idx) in isRefund?data.cause2:data.cause1" :key="idx">{{item.dictValue}}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { getCurrentInstance, ref } from 'vue'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const titleData = ref({
  title: '取消订单',
  pageTitle: '请选择取消订单的原因'
})
const popup = ref()
const isDetail = ref()
const isRefund = ref()
const data = ref({
  orderId: null,
  orderType: null,
  cause1: [], // 取消订单理由
  cause2: [], // 退款理由
  causeSelectIdx: 0,
  causeSelect: '请选择',
  causeStr: '',
  clickTitle: () => {
    popup.value.open()
  },
  popupSubmit: () => {
    data.value.causeSelect = isRefund.value ? data.value.cause2[data.value.causeSelectIdx].dictValue : data.value.cause1[data.value.causeSelectIdx].dictValue
    popup.value.close()
  },
  changePicker: (e) => {
    data.value.causeSelectIdx = e.detail.value[0]
  }
})
// 获取取消订单理由
const getCancelRemark = () => {
  $https({
    url: '/app/basicData/getBasicDataByCode',
    method: 'get',
    type: '',
    data: {
      code: 'order_cancel_remark'
    }
  }).then((res) => {
    data.value.cause1 = res.data
  })
}
// 获取退款订单理由
const getReturnRemark = () => {
  $https({
    url: '/app/basicData/getBasicDataByCode',
    method: 'get',
    type: '',
    data: {
      code: 'order_return_remark'
    }
  }).then((res) => {
    data.value.cause2 = res.data
  })
}
onLoad((options) => {
  getCancelRemark()
  getReturnRemark()
  isDetail.value = options.isDetail === 'true'
  isRefund.value = options.isRefund === 'true'
  if (options.data) {
    const parse = JSON.parse(decodeURIComponent(options.data))
    if (parse) {
      data.value.orderType = parse.orderType
      data.value.orderId = parse.id
    }
  }
  if (isRefund.value) {
    titleData.value.title = '退款'
    titleData.value.pageTitle = '请选择退款的原因'
  }
  uni.setNavigationBarTitle({ title: titleData.value.title })
})

const cancelOrder = () => {
  if (data.value.causeSelect.length <= 0 || data.value.causeSelect === '请选择') {
    uni.showToast({ title: '请选择' + (isRefund.value ? '退款' : '取消订单') + '原因', icon: 'none' })
    return false
  }
  uni.showModal({
    content: '是否确认' + (isRefund.value ? '退款' : '取消订单') + '？',
    confirmText: '确认',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        const params = {
          orderType: data.value.orderType,
          orderId: data.value.orderId,
          cancelReason: data.value.causeStr.length > 0 ? data.value.causeSelect + ',' + data.value.causeStr : data.value.causeSelect
        }
        const url = isRefund.value ? '/app/order/orderRefund' : '/app/order/cancelOrder'
        $https({
          url: url,
          type: '',
          method: 'post',
          data: params
        }).then(res => {
          if (res.code === 0) {
            uni.showToast({ title: '操作成功', icon: 'none' })
            if (isRefund.value) {
              uni.requestSubscribeMessage({
                tmplIds: ['AsEPZkIReJowg5AHlr2s-385xqyJNM6Sc9p8yzXs_xA'],
                success: function (res) {
                  wx.login({
                    success: (loginRes) => {
                      $https({
                        // 利用code去换取openid
                        url: '/js-token',
                        type: '',
                        data: {
                          code: loginRes.code,
                          scene: 'mp4'
                        }
                      }).then(resOpenid => {
                        if (resOpenid.code === 0) {
                          $https({
                            // 添加订阅
                            url: '/subscribe/add',
                            type: '',
                            method: 'POST',
                            data: {
                              templateId: ['AsEPZkIReJowg5AHlr2s-385xqyJNM6Sc9p8yzXs_xA'],
                              openId: resOpenid.data.openid
                            }
                          }).then((addRes) => {
                            if (addRes.code === 0) {
                              setTimeout(() => {
                                uni.navigateBack({ delta: isDetail.value ? 2 : 1 })
                              }, 1000)
                            }
                          })
                        }
                      })
                    },
                    fail (res) {
                      setTimeout(() => {
                        uni.navigateBack({ delta: isDetail.value ? 2 : 1 })
                      }, 1000)
                    }
                  })
                },
                fail: function (res) {
                  setTimeout(() => {
                    uni.navigateBack({ delta: isDetail.value ? 2 : 1 })
                  }, 1000)
                }
              })
            } else {
              setTimeout(() => {
                uni.navigateBack({ delta: isDetail.value ? 2 : 1 })
              }, 1000)
            }
          }
        })
      }
    }
  })
}
</script>
<style scoped lang="scss">
.main {
  min-height: 100vh;
  padding: 30rpx 30rpx calc(72px + env(safe-area-inset-bottom)) 30rpx;
  background: #f4f4f4;
}
.bottom_div{
  position: fixed;
  bottom: 0;
  height: calc(56px + env(safe-area-inset-bottom));
  min-height: 70px;
  width: 100%;
  background-color: #ffffff;
  left: 0;
  padding: 14px 14px 0 14px;
  z-index: 98;
}
.submitOrder{
  width: 444rpx;
  height: 90rpx;
  background: #525FA2;
  border-radius: 45rpx;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 90rpx;
  font-size: 32rpx;
}
.title{
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}
.select{
  background: #FFFFFF;
  border: 1px solid #DDD;
  border-radius: 18rpx;
  padding: 30rpx 36rpx;
  margin-top: 37rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  display: flex;
  align-items: center;
}
.txt{
  margin-top: 20rpx;
}
.region-box {
  text-align: center;

  .title {
    line-height: 90rpx;
    background-color: #F2F2F2;
    display: flex;
    justify-content: space-between;
    color: #EE751E;
  }

  .picker-view {
    height: 500px;

    .item {
      line-height: 34px;
    }
  }
}
</style>
<style scoped>
/deep/.uni-easyinput__content-textarea{
  background: #FFFFFF;
  border: 1px solid #DDD;
  border-radius: 18rpx;
  margin: 0;
  padding: 30rpx 36rpx;
}
/deep/.is-input-border{
  border:none !important;
}
</style>
